<!-- Dom模板 -->
<template>
    
  <div class="tuichubox">
        <!-- Dom内容 -->
    <div class="meng" @click="close"></div>
    <div class="tuichulist">
      <div class="tuichu">
        <div class="tuichu_list">
          <p @click="tuichulogin">退出登录</p>
        </div>
          
        <div class="tuichu_list">
          <p @click="zhuxiaologin">注销账号</p>
        </div>
        <div class="tuichu_list">
          <p @click="close()">取消</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
export default {
  data() {
    return {
      msg: "测试",
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义
  methods: {
    close() {
      this.$parent.back();
    },
    tuichulogin() {
      // if (sessionStorage.getItem("userId")) {
        sessionStorage.clear();
        localStorage.clear();
        this.$store.commit("login/clear");
        this.$router.history.push("/login");
      // }
    },
    zhuxiaologin() {
      // if (sessionStorage.getItem("userId")) {
        Toast.loading({
          message: "注销中...",
          forbidClick: true,
          duration: 100000,
        });
        let id = sessionStorage.getItem("userId");
        this.$store.dispatch("login/deletuser", { userid: id }).then((res) => {
          if (res.code === 200) {
            setTimeout(() => {
              Toast.success(res.msg);
              setTimeout(() => {
                sessionStorage.clear();
                localStorage.clear();
                // this.$store.state.bags.musicBagItem={}
                this.$store.commit('bags/clearMusicBag')
                this.$store.commit("login/clear");
                this.$router.history.push("/login");
              }, 800);
            }, 2000);
          }
        });
      // }
    },
  },
};
</script>

<style scoped>
@import url("../../../static/fonts/iconfont.css");
/* @import url(); 引入css类 */
/* .meng {
  width: 100vh;
  height: calc(100vh - 4.613333rem);
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
} */
.tuichulist {
  width: 100%;
  height: 4.613333rem;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  transition: 0.2s all;
}
.tuichu {
  width: 100%;
  height: 4.613333rem;
  background-color: rgba(0, 0, 0, 0.02);
}
.tuichu_list {
  width: 100%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgb(0 0 0 / 1%);
  font-size: 0.533333rem;
  font-family: "PingFangSC-bold";
  text-align: center;
}
</style>